---
title: Cangkuk Modal
description: Buka modals secara programatik melalui Cangkuk
---

# Cangkuk Modal

## Buka modals secara programatik melalui Cangkuk

Cangkuk berikut disediakan untuk membolehkan pembukaan programatik modals di mana-mana dalam aplikasi anda.

- `useConnectModal`
- `useAccountModal`
- `useChainModal`

Setiap Cangkuk ini mengembalikan objek dengan fungsi untuk membuka modalnya masing-masing. Perhatikan bahawa fungsi yang dikembalikan akan menjadi undefined jika aplikasi anda tidak berada dalam keadaan yang diperlukan untuk modal dibuka.

```tsx
import {
  useConnectModal,
  useAccountModal,
  useChainModal,
} from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  const { openConnectModal } = useConnectModal();
  const { openAccountModal } = useAccountModal();
  const { openChainModal } = useChainModal();

  return (
    <>
      {openConnectModal && (
        <button onClick={openConnectModal} type="button">
          Open Connect Modal
        </button>
      )}

      {openAccountModal && (
        <button onClick={openAccountModal} type="button">
          Open Account Modal
        </button>
      )}

      {openChainModal && (
        <button onClick={openChainModal} type="button">
          Open Chain Modal
        </button>
      )}
    </>
  );
};
```

Setiap cangkuk juga mengembalikan boolean untuk status modal. Secara umumnya disyorkan agar anda bergantung sepenuhnya pada cangkuk Wagmi (iaitu `useAccount`) untuk bertindak balas terhadap status sambungan dompet pengguna secara langsung, daripada bergantung pada keadaan Modal Sambung.

```tsx
const { connectModalOpen } = useConnectModal();
const { accountModalOpen } = useAccountModal();
const { chainModalOpen } = useChainModal();
```

RainbowKit direka untuk tidak mengganggu dan responsif, jadi dApps harus sentiasa memaparkan antara muka untuk pengguna tanpa mengira sama ada mereka telah menyambung dompet mereka atau tidak. Seorang pengguna boleh menyambung atau memutuskan sambungan dompet mereka secara langsung dari MetaMask, jadi dApp mesti responsif kepada status sambungan asas secara langsung.

dApps yang bergantung pada mekanisme seperti Daftar masuk dengan Ethereum untuk pengesahan pengguna sebaliknya harus bergantung pada ciri [Authentication](/docs/authentication).
